<template>
  <a-card class="case_produce" :bordered="false">
    <a-spin tip="加载中..." :spinning="spinning">
      <div style="margin-bottom: 15px">
        <span class="add_form_label">{{ labelTitle }}</span>
        <!-- <a-button v-if="btnLabel" @click="activeBtnClick" type="primary" class="add_form_btn" v-show="operateBtnShow">
          {{ btnLabel }}
        </a-button> -->
        <!-- 只有非受理前调解和撤回才展示-->
        <span v-if="operateBtnShow">
          <!-- 除了受理前调解和撤回和其他处理 要执行表单填写 -->
          <!-- <a-button v-if="
              busiName != Tp_proctypeEnum.mater_mediate.key &&
              busiName != Tp_proctypeEnum.accept_result.key &&
              busiName != Tp_proctypeEnum.accept_otherdeal.key"
              @click="activeBtnClick" type="primary" class="add_form_btn">
            {{ btnLabel }}
          </a-button>
          <a-button v-else @click="startBusinessProcedClick" type="primary" class="add_form_btn" :loading="processLoading">
            {{ btnLabel }}
          </a-button> -->
          <a-button
            v-if="btnLabel"
            @click="startBusinessProcedClick"
            type="primary"
            class="add_form_btn btn_primary_color"
            :loading="processLoading"
          >
            {{ btnLabel }}
          </a-button>
        </span>
        <!-- 当前是编辑模式 -->
        <a-button
          v-if="isEditModel && uploadBtnShow"
          class="add_form_btn btn_normal_color"
          @click="addCustomerMaterial"
        >
          新增自定义材料
        </a-button>
        <a-divider />
      </div>
      <div
        style="height: 50px; margin-left: 10px"
        v-if="busiName == Tp_proctypeEnum.accept_accept.key || busiName == Tp_proctypeEnum.accept_noaccept.key"
      >
        <a-col :span="4"> <span class="tip_label">是否市领导审批：</span></a-col>
        <a-col :span="18">
          <a-radio-group
            name="radioGroup"
            v-model="isCitymanager"
            @change="citymanagerChange"
            :disabled="!operateBtnShow"
          >
            <a-radio :value="3200"> 是 </a-radio>
            <a-radio :value="3201"> 否 </a-radio>
          </a-radio-group>
        </a-col>
      </div>
      <a-list class="file_list" item-layout="horizontal" :data-source="fileItem">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta style="margin-top: 10px">
            <span slot="title">
              <div v-if="!item.isCustomer">
                <span
                  v-if="item.required"
                  style="color: red; padding-right: 5px; text-align: center; display: inline-block; height: 35px"
                  >*</span
                >
                <span v-else style="padding-right: 10px"></span>
                <!-- <a-icon class="file_icon" slot="avatar" type="file-text" /> -->
                <!-- <a-upload :class="uploadBtnShow ? 'upload-style' : 'upload-style-hidden'" :accept="acceptFileType" :data="item" :customRequest="uploadMaterial"
                          :beforeUpload="(file) => beforeUpload(file)" :remove="handleRemove" @preview="fileView" :fileList="item.fileList" :showUploadList="false" name="file" :multiple="true">
                  <a-button v-show="uploadBtnShow">
                    <a-icon type="upload" />上传</a-button>
                </a-upload> -->
                <div class="file_title">
                  <span class="upload_span">{{ item.fileName }}</span>
                  <a
                    class="upload_btn btn_normal_color"
                    style="margin-left: 10px"
                    v-show="uploadBtnShow"
                    @click="showUploadModal(item, false)"
                  >
                    <a-icon type="upload" :style="{ color: '#0072c6' }" /><span style="color: #0072c6">&nbsp;上传</span>
                  </a>
                </div>

                <div class="upload_list_div" v-for="(fileItem, index) in item.fileList" :key="index">
                  <a
                    style="color: #0072c6"
                    class="upload_list_dropdown ant-dropdown-link"
                    @click="e => e.preventDefault()"
                  >
                    <a-icon type="link" style="font-size: 14px; margin-left: 15px" />
                    <a
                      style="color: #0072c6"
                      type="link"
                      class="upload_list_item_name beyond_hiding"
                      :title="fileItem.filename"
                      :key="index"
                      @click="fileItem.isEditor ? null : handleClick(fileItem, index)"
                      @dblclick.prevent="handleDoubleClick(fileItem, index)"
                    >
                      <!-- 添加重命名输入框，根据fileItem.isEditor状态显示 -->
                      <input
                        :ref="`input${index}`"
                        v-show="fileItem.isEditor"
                        type="text"
                        class="transparent-input"
                        v-model="newFilename"
                        :key="index"
                        ref="inputRef"
                        autofocus
                        @blur="saveFileName(fileItem)"
                        @keydown.enter="saveFileName(fileItem)"
                      />

                      <span v-show="!fileItem.isEditor">{{ fileItem.filename }}</span>
                    </a>

                    <a-dropdown :trigger="['click']">
                      <a class="ant-dropdown-link" style="display: inline-block" @click="e => e.preventDefault()"
                        >操作<a-icon type="down" style="padding-left: 10px"
                      /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a style="display: block" @click="downloadFile(fileItem)">下载</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block" @click="fileView(fileItem)">预览</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="handleRemove(fileItem)">删除</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block" @click="editFile(fileItem)">编辑</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="weboffice(currentUser.userId, applyid, fileItem)"
                            >在线编辑</a
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="versionView(fileItem)">历史版本</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a>
                </div>
              </div>
              <div v-else-if="item.isSaved && !item.isUpdated">
                <span style="padding-right: 10px"></span>
                <!-- <a-icon class="file_icon" slot="avatar" type="file-text" /> -->
                <div class="file_title">
                  <span class="upload_span">
                    {{ item.fileName }}
                    <a
                      style="margin-left: 10px"
                      class="upload_btn btn_normal_color"
                      v-show="uploadBtnShow && item.isSaved"
                      @click="showUploadModal(item, true)"
                    >
                      <a-icon :style="{ color: '#0072c6' }" type="upload" /><span style="color: #0072c6"
                        >&nbsp;上传</span
                      >
                    </a>
                    <a-divider type="vertical" />
                    <!-- <a style="margin-left:40px" type="link" @click="editCustomerMaterial(item)">编辑</a> -->
                    <a class="upload_btn btn_normal_color" v-show="uploadBtnShow" @click="editCustomerMaterial(item)">
                      <a-icon :style="{ color: '#0072c6' }" type="edit" />&nbsp;<span style="color: #0072c6">
                        &nbsp;编辑
                      </span>
                    </a>
                    <a-divider type="vertical" />
                    <!-- <a-icon
                      v-show="uploadBtnShow"
                      class="customer_icon"
                      style="margin-left: 40px"
                      @click="editCustomerMaterial(item)"
                      type="edit"
                    />编辑 -->
                    <a-popconfirm
                      title="确认删除自定义材料项吗？"
                      ok-text="是"
                      cancel-text="否"
                      @confirm="deleteCustomer(item)"
                      class="left_icon"
                    >
                      <a class="upload_btn btn_normal_color" v-show="uploadBtnShow">
                        <a-icon :style="{ color: '#0072c6' }" type="delete" />&nbsp;
                        <span style="color: #0072c6"> &nbsp;删除 </span></a
                      >
                      <!-- <a-icon
                        v-show="uploadBtnShow"
                        class="customer_icon"
                        style="margin-left: 20px"
                        type="delete"
                      />删除 -->
                    </a-popconfirm>
                  </span>
                </div>
                <!-- <a-upload :class="uploadBtnShow ? 'upload-style' : 'upload-style-hidden'" :accept="acceptFileType" :data="item" :customRequest="uploadMaterialCustomer"
                          :beforeUpload="(file) => beforeUpload(file)" :remove="handleRemove" @preview="fileView" :fileList="item.fileList" :showUploadList="false" name="file" :multiple="true">
                  <a-button v-show="uploadBtnShow && item.isSaved">
                    <a-icon type="upload" />上传</a-button>
                </a-upload> -->
                <div class="upload_list_div" v-for="(fileItem, index) in item.fileList" :key="index">
                  <a class="upload_list_dropdown ant-dropdown-link" @click="e => e.preventDefault()">
                    <a-icon :style="{ color: '#0072c6' }" type="link" style="font-size: 14px; margin-left: 15px" />
                    <a
                      type="link"
                      class="upload_list_item_name beyond_hiding"
                      :title="fileItem.filename"
                      :key="index"
                      @click="fileItem.isEditor ? null : handleClick(fileItem, index)"
                      @dblclick.prevent="handleDoubleClick(fileItem, index)"
                    >
                      <!-- 添加重命名输入框，根据fileItem.isEditor状态显示 -->
                      <input
                        :ref="`input${index}`"
                        v-show="fileItem.isEditor"
                        type="text"
                        class="transparent-input"
                        v-model="newFilename"
                        :key="index"
                        ref="inputRef"
                        autofocus
                        @blur="saveFileName(fileItem)"
                        @keydown.enter="saveFileName(fileItem)"
                      />

                      <span style="color: #0072c6" v-show="!fileItem.isEditor">{{ fileItem.filename }}</span>
                    </a>

                    <a-dropdown :trigger="['click']">
                      <a
                        class="ant-dropdown-link"
                        style="display: inline-block; width: 70px"
                        @click="e => e.preventDefault()"
                        >操作<a-icon type="down" style="padding-left: 10px"
                      /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a style="display: block" @click="downloadFile(fileItem)">下载</a>
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a style="display: block" @click="fileView(fileItem)">预览</a>
                        </a-menu-item> -->
                        <a-menu-item>
                          <a style="display: block" @click="handleRemove(fileItem)">删除</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="weboffice(currentUser.userId, applyid, fileItem)"
                            >在线编辑</a
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a style="display: block" @click="versionView(fileItem)">历史版本</a>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </a>
                </div>
              </div>
              <div class="customer_div" v-else-if="!item.isSaved || item.isUpdated">
                <span class="customer_span"> {{ !item.isSaved ? '新增:' : '修改:' }}</span>
                <a-input
                  class="customer_input"
                  ref="userNameInput"
                  v-model="item.fileName"
                  placeholder="请输入自定义材料名称"
                  :max-length="50"
                >
                  <a-tooltip slot="suffix" title="材料名称长度上限50">
                    <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </a-input>
                <div class="customer_icon_group" v-show="uploadBtnShow">
                  <a-popconfirm
                    title="确认撤销吗？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="rollBackCustomerMaterial(item)"
                    class="left_icon"
                  >
                    <a-icon class="customer_icon" type="close" />
                  </a-popconfirm>
                  <a-popconfirm
                    title="确认保存吗？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="saveCustomerMaterial(item)"
                    class="left_icon"
                  >
                    <a-icon class="customer_icon" style="margin-left: 20px" type="check" />
                  </a-popconfirm>
                </div>
              </div>
            </span>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-spin>

    <MultiUploadProduce
      ref="multiUploadProduce"
      :applyid="applyid"
      :busiType="busiType"
      :currentUser="currentUser"
      @afterUpload="queryMaterialsList"
    ></MultiUploadProduce>

    <MaterialVersion ref="materialVersionRef"></MaterialVersion>
    <!-- <component ref="component" :is="component" :applyid="applyid" :busiType="busiType" :fileItem="fileItem" :processinstanceid="processinstanceid" @reload="reloadComponent"
               @gotoSonRouter="autoToSonRouter" />

    <component ref="updateComponent" :is="updateComponent" :applyid="applyid" :busiType="busiType" :materialOption="selectedOption" @reload="reloadComponent" /> -->
  </a-card>
</template>
<script>
import { getTabByCategory } from '@/enumeration/Tp_category'
import { ProcedureMinxin } from '../ProcedureMinxin'
import { updateFilename } from '@/api/accept/aprv_materials_options'
export default {
  mixins: [ProcedureMinxin],
  data () {
    return {
      newFilename: ''
    }
  },
  created () {
    console.log('busikey' + this.busiKey)
    this.initParam()
  },
  mounted () {},
  methods: {
    // handleDoubleClick(fileItem, index) {
    //   // 处理双击文件名的逻辑，例如进入编辑模式
    //   //把所有材料的编辑开关都设为false
    //   this.fileItem.forEach((files,index) => {
    //     files.fileList.forEach((file,index) => {
    //       file.isEditor = false;
    //     })

    //   });
    //   //将材料名先复制给 newFilename 双向绑定到 编辑框上
    //   this.newFilename = fileItem.filename;
    //   fileItem.isEditor = true; // 进入编辑模式
    //   //自动获取焦点
    //   this.$nextTick(() => {
    //   this.$refs[`input${index}`].forEach(e => {
    //     e.focus()
    //   })
    //   })
    // },
    // saveFileName(fileItem) {
    //   // 保存文件名的逻辑
    //   fileItem.filename = this.newFilename;
    //   updateFilename(fileItem.id,fileItem.filename);
    //   this.fileItem.forEach((files,index) => {
    //     files.fileList.forEach((file,index) => {
    //       if (file.id == fileItem.id) {
    //         file = fileItem
    //         this.$set(file, 'isEditor', false)
    //       }
    //       this.$set(file, 'fileName', this.newFilename)
    //     })
    //     this.$set(this.fileItem, index, files)
    //   });
    // },
    // // 在 saveFileName 方法中更新文件名并退出编辑模式

    // handleClick(fileItem, index) {

    //   // 模拟双击事件
    //   if (this.clickTimeout) {
    //     clearTimeout(this.clickTimeout);
    //     this.clickTimeout = null;
    //     this.handleDoubleClick(fileItem, index);
    //   } else {
    //     this.clickTimeout = setTimeout(() => {
    //       this.clickTimeout = null;
    //       this.fileView(fileItem);
    //     }, 300); // 这里的时间间隔可以根据实际情况调整
    //   }
    // },

    setButtonDisabled () {
      if (this.isEditModel) {
        // 是否是从编辑模式进入
        const tabCategory = getTabByCategory(this.category, this.busiKey)
        if (tabCategory == 'editAll') {
          this.operateBtnShow = true // 操作按钮展示
          this.uploadBtnShow = true // 上传按钮展示
        } else if (tabCategory == 'disabled') {
          this.operateBtnShow = false
          this.uploadBtnShow = true
        } else if (tabCategory == 'editOnlySelf') {
          this.operateBtnShow = false
          this.uploadBtnShow = true
        }
      } else {
        this.operateBtnShow = false
        this.uploadBtnShow = false
      }
      // FIXME: 临时放开
      this.uploadBtnShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/apply/caseProcedure.scss';
/* 样式表中定义 .transparent-input 类 */
.transparent-input {
  background-color: transparent; /* 设置背景透明 */
  border: none; /* 移除边框 */
  border-bottom: 1px solid rgb(251, 251, 252); /* 可选：添加底部边框以提升可视度 */
  outline: none; /* 移除默认的输入框外观 */
  color: rgb(119, 166, 253); /* 设置文本颜色 */
  /* 可以根据需要添加更多样式 */
}
::v-deep .ant-dropdown-link .ant-dropdown-trigger {
  color: #000;
  width: 70px;
}
::v-deep .ant-list-split .ant-list-item {
  border: none;
  margin-left: 10px;
}
</style>
